<template>
  <div class="container">
    <div class="circle top">
      <img :src="uploadedImage" alt="Uploaded Image" class="avatar">
      <div class="underline"></div>
    </div>
    <div class="button-container">
      <div class="circle small white personal-info" @click="goToPersonalInfo">
        <span class="text">个人信息管理</span>
      </div>
      <div class="circle small white business-info" @click="goToBusinessInfo">
        <span class="text">商家信息查询</span>
      </div>
    </div>
    <div class="button-exit">
      <div class="circle small white Exit" @click="goToExit">
        <span class="text">退出登录</span>
      </div>
    </div>
  </div>
</template>

<script>
  import store from '@/store/index.js' //需要引入store
  // import { mapState } from 'vuex'
  export default {

    data() {
      return {
        avatar: null,
        uploadedImage: '',
      }
    },
    // computed: { ...mapState(['admin']), },
    mounted() {

      this.getImage() // 获取头像

    },
    onLoad() {
      uni.hideHomeButton()
    },
    methods: {
      // 获取头像
      getImage() {
        this.uploadedImage = store.state.admin.Admin_image
        // console.log('image:', this.uploadedImage)
      },


      //以下是跳转界面的算法
      goToPersonalInfo() {
        uni.navigateTo({ url: '/subpkg/adminIndex/myinfo' })
      }, //为跳转到个人信息管理界面的跳转代码
      goToBusinessInfo() {
        uni.navigateTo({ url: '/subpkg/adminIndex/B-Infoadmin' })
      }, //为跳转到商家信息管理界面的跳转代码
      goToExit() {
        // 退出登录
        console.log('退出登录前的token:', store.state.token)
        console.log('退出登录前的admininfo:', store.state.admin)
        // 清空数据
        store.commit('loginAdmin', {})
        store.commit('updatetToken', '')
        console.log('退出登录后的token:' + store.state.token)
        console.log('退出登录后的admininfo:', store.state.admin)
        wx.redirectTo({ url: '/pages/adminLogin/adminLogin', })
      },
      handleFileChange(event) {
        const file = event.target.files[0]
        this.avatar = URL.createObjectURL(file)
      }
    }
  }
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100vh;
    padding: 20px;
    background-color: skyblue;
    animation: fadeIn 0.5s ease-in-out;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: #ffffff;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
    transition: transform 0.3s ease;
    cursor: pointer;
  }

  .circle:hover {
    transform: scale(1.05);
  }

  .top {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    position: relative;
  }

  .top::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 10%;
    width: 80%;
    height: 2px;
    background-color: #00f;
  }

  .circle.top {
    position: relative;
    width: 150px;
    /* 调整圆形容器的宽度 */
    height: 150px;
    /* 调整圆形容器的高度 */
    border-radius: 50%;
    overflow: hidden;
    /* 超出容器部分被遮住 */
  }

  .circle.top .avatar {
    max-width: 100%;
    /* 图片最大宽度为容器的宽度 */
    max-height: 100%;
    /* 图片最大高度为容器的高度 */
    object-fit: cover;
    /* 确保图片填充满容器 */
  }

  .button-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
  }


  .small {
    width: 120px;
    height: 120px;
  }

  .white {
    background-color: #ffffff;
  }

  .personal-info {
    margin-left: 0px;
    margin-bottom: 100px;
  }

  .business-info {
    margin-left: 40px;
    margin-bottom: 100px;
  }

  .text {
    font-weight: normal;
    font-size: 14px;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    font-family: "SimSun", "STFangsong", "FangSong", "serif";
  }

  .underline {
    width: 80%;
    height: 2px;
    background-color: #00f;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
  }

  .button-exit {
    display: flex;
    justify-content: space-between;
    margin-top: -150px;
  }
</style>